import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import {
  Scene,
  Router,
  Lightbox,
  Drawer,
  Actions,
  Tabs
} from 'react-native-router-flux';
import styles from './style';
import TabIcon from './components/TabIcon';
import HomePage from './pages/Home/HomePage';
import FindPage from './pages/Find/FindPage';
import ClassifyPage from './pages/Classify/ClassifyPage';
import ShoppingPage from './pages/Shopping/ShoppingPage';
import MinePage from './pages/Mine/MinePage';
export default class Index extends Component {
  render() {
    return (
      <Router
        getSceneStyle={() => {
          return styles.routerStyle;
        }}>
        <Lightbox>
          <Scene key="root">
            <Tabs
              key="tabbar"
              lazy={true}
              showLabel={false}
              hideNavBar
              tabBarPosition="bottom"
              tabBarStyle={{
                height: 40,
                borderTopColor: '#e7e7e7',
                borderTopWidth: StyleSheet.hairlineWidth,
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: 'white'
              }}>
              <Scene
                key="homePage"
                hideNavBar
                titleStyle={styles.centerTitle}
                component={HomePage}
                title="首页"
                icon={TabIcon}
                tabIconName={'tabHome'}
              />
              <Scene
                key="find"
                hideNavBar
                titleStyle={styles.centerTitle}
                component={FindPage}
                title="发现"
                icon={TabIcon}
                tabIconName={'tabFind'}
              />

              <Scene
                key="classify"
                hideNavBar
                titleStyle={styles.centerTitle}
                component={ClassifyPage}
                icon={TabIcon}
                title="分类"
                tabIconName={'tabClassify'}
              />
              <Scene
                key="shopping"
                hideNavBar
                titleStyle={styles.centerTitle}
                component={ShoppingPage}
                title="购物车"
                icon={TabIcon}
                tabIconName={'tabShopping'}
              />
              <Scene
                key="Mine"
                hideNavBar
                titleStyle={styles.centerTitle}
                component={MinePage}
                title="我的"
                icon={TabIcon}
                tabIconName={'tabMine'}
              />
            </Tabs>
          </Scene>
        </Lightbox>
      </Router>
    );
  }
}
